<template>
  <div class="hello">
    <p>store 中的 msg: {{ msg }}</p>

    <button @click="changeMsg('world')">提交突变，修改 msg</button>
    <br />
    <button @click="onClick">提交突变，间接调用 changeMsg</button>
    <br />
    <button @click="fn1">派发动作 abc - $store的方式</button>
    <br />
    <button @click="abc({ name: '张三' })">
      派发动作 abc - 辅助函数 mapActions 的方式
    </button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";

export default {
  name: "HelloWorld",

  computed: {
    ...mapState(["msg"]), // msg => this.msg
  },

  methods: {
    ...mapMutations(["changeMsg"]), // changeMsg => this.changeMsg
    ...mapActions(["abc"]), // abc  => this.abc
    onClick() {
      // 干了一些事情之后
      this.changeMsg("world");
    },
    fn1() {
      // 两个参数的方式
      this.$store.dispatch("abc", { name: "张三" });
      // 对象的方式
      this.$store.dispatch({
        // 必须有 type 属性，值就是 动作的名字
        type: "abc",
        name: "张三",
      });
    },
    fn2() {
      // console.log(this.abc);
      this.abc({ name: "张三" });
    },
  },

  // methods: {
  //   ...mapActions(["abc"]),
  // },

  // methods: {
  //   abc(payload) {
  //     this.$store.dispatch("abc", payload);
  //   },
  // },
};
</script>
